import React from 'react'
import { Form, Input,  Button,Avatar,Cascader,message } from 'antd'
import options from './city.js'
import http from '../../../service/http.js'
import {GetUserName} from '../../../common/auth.js'
export default function Basic_Set() {
  const [userOne,setUserOne] = React.useState({})
  const [userOneForm]=Form.useForm()
  React.useEffect(()=>{
    http.getUser({username:GetUserName()}).then((res)=>{
      setUserOne(res.data)
      userOneForm.setFieldsValue(res.data)
    })
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  const changeFile = (e)=>{
    let file = e.target.files[0]
    let formFile = new FormData()
    formFile.append("file", file)
    http.uploadImg(formFile).then((res)=>{
      setUserOne({...userOne,img:res.data})
    })
  }
  const submit = async ()=>{
    try{
      const fieldsValue = await userOneForm.validateFields()
      setUserOne({...userOne,name:fieldsValue.name,individualResume:fieldsValue.individualResume})
      await http.saveUser({...userOne,name:fieldsValue.name,individualResume:fieldsValue.individualResume})
      message.success('提交成功!')
    }
    catch{
      message.error('提交失败!')
    }
  }
  return (
    <div style={{position:'relative'}}>
      <label htmlFor="file">
        <Avatar alt='' style={{float:'right',marginRight:'90px'}} src={userOne.img} size={80}></Avatar>
        <Button style={{zIndex:'2',position:'absolute',right:'64px',bottom:'285px'}} type='text'>点击头像更换</Button>
      </label>
      <input type="file" name="file" id='file' onChange={(e)=>{changeFile(e)}} accept="image/*" hidden={true}/>
      <Form name='personal_message' layout='vertical' labelWrap={true} form={userOneForm}
      >
        <Form.Item
        name='email'
        label="邮箱"
        rules={[
              {
                type:'email',
                message:'邮箱格式有误'
              },
              { 
                required: true,
                message: '请输入邮箱格式!' 
              }
        ]}
        initialValue='2338973980@qq.com'
        >
        <Input maxLength={30} style={{width:'300px'}} allowClear={true}/>
        </Form.Item>
        <Form.Item
        name='name'
        label="昵称"
        rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入昵称!',
              },
            ]}
        >
        <Input maxLength={30} style={{width:'300px'}} allowClear={true}/>
        </Form.Item>
        <Form.Item
          name="location"
          label="所在省市"
          initialValue={[['360000', '360400', '360482']]}
        >
          <Cascader
            fieldNames={{ label: 'label', value: 'value', children: 'children' }}
            options={options}
            onChange={()=>{}}
            placeholder="请选择"
            placement='bottomLeft'
            style={{width:'300px'}}
          />
        </Form.Item>
        <Form.Item
        name="individualResume"
        label="个人简介"
        >
        <Input.TextArea maxLength={100} style={{width:'500px',height:'80px'}} allowClear={true}/>
        </Form.Item>
      </Form>
      <Button type='primary' style={{width:'150px'}} onClick={submit}>提交</Button>
    </div>
  )
}